<template>
    <view class="flex-row flex flex-row-center-center"  >
        <view 
        v-for="(item, index) in _datalist" :key="index"
        :class="[`px-${props.gutter/2}`]">
            <tm-sheet
            @click="emits('click')"
            :round="props.round"
            :border="props.border"
            :text="true"
            :color="props.color"
            :width="_size"
            :height="_size"
            :margin="[0,0]"
            :padding="[0,0]"
            _class="flex-center"
			:followTheme="props.followTheme"
            >
                <tm-text :userInteractionEnabled="false" v-if="item.value!==''" :label="item.value" :color="props.fontColor" :font-size="props.fontSize"></tm-text>
                <tm-icon :userInteractionEnabled="false" v-if="item.value==''&&index!==_valueLen" :color="props.fontColor" name="tmicon-ios-remove"></tm-icon>
                	<!-- #ifndef APP-NVUE -->
                    <tm-sheet
					:followTheme="props.followTheme"
                    :userInteractionEnabled="false"
                    paren-class="tmSkeletonLine"
					class="tmSkeletonLine"
                    v-if="item.value==''&&index===_valueLen"
                    :width="6"
                    :color="(props.fontColor||props.color)"
                    :height="_size/2"
                    :margin="[0,0]"
                    :padding="[0,0]">
                    </tm-sheet>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <inputinit :followTheme="props.followTheme" v-if="item.value==''&&index===_valueLen" :size="_size" :color="(props.fontColor||props.color)"></inputinit>
                    <!-- #endif -->
            </tm-sheet>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import tmIcon from "../tm-icon/tm-icon.vue"
import tmSheet from "../tm-sheet/tm-sheet.vue"
import tmText from "../tm-text/tm-text.vue"
import { custom_props } from '../../tool/lib/minxs';
import inputinit from './inputinit.vue';
const emits = defineEmits(["click"])
const props = defineProps({
    ...custom_props,
	followTheme:{
		type:[Boolean,String],
		default:true
	},
    size:{
        type:Number,
        default:100
    },
    gutter:{
        type:Number,
        default:24
    },
    round:{
        type:Number,
        default:2
    },
    border:{
        type:Number,
        default:2
    },
    //未输入时的闪烁形状，
    //圆：dot,线型:line
    type:{
        type:String,
        default:'dot'
    },
    fontSize:{
        type:Number,
        default:44
    },
    //不填写时，默认自动配色。
    fontColor:{
        type:String,
        default:""
    },
    color:{
        type:String,
        default:"primary"
    },
    //数量
    count:{
        type:Number,
        default:4
    },
    value:{
        type:[Number,String],
        default:"35"
    }
})

const _mtype = computed(()=>props.type)
const _count = computed(()=>props.count)
const _valueLen = computed(()=>String(props.value).split("").length)
const _size = computed(()=>props.size)
const _datalist = computed(()=>{
    let list = [];
    let _value = String(props.value).split("")
    for(let i=0;i<_count.value;i++){
        list.push({
            value:_value[i]??"",
            index:i,
        })
    }
    return list;
})



</script>
<style scoped>
/* #ifndef APP-NVUE */
.tmSkeletonLine {
	animation: loading 1s linear infinite;
}

@keyframes loading {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* #endif */
</style>